window.addEventListener('load',function(){
let conlTabsIndex=0;
let rankID=93;
let date = new Date();
let dateNow=`${date.getFullYear()}-${date.getMonth()+1<10?'0'+ (date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
// 歌曲分页
let page = location.hash.replace('#!fenye=', '') || 1;
let pageSize = 20;
let totals = 0;
//  评论分页
let plPage = location.hash.replace('#!fenye=', '') || 1;
let plPageSize = 5;
let plTotals = 0;

 let laypage;
fetch('http://39.96.88.57:9090/api/www/bang/bang/bangMenu?httpsStatus=1').then(res => res.json()).then(res=>{
    res.data.forEach((item,index) => {
        if(index<3){
        conlTabs.innerHTML+=`
               <span>${item.name}</span>  
        `
        }
    });

let index = 0;

let conlTabsSpan = document.querySelectorAll('#conlTabs span');
conlTabUls()

// tab切换
  conlTabsSpan[0].className='actives';
    for (let i = 0; i < conlTabsSpan.length; i++) {
        conlTabsSpan[i].addEventListener('click',function(){
        conlTabUl.innerHTML='';
        index=i; 
        conlTabUls()
        conlTabsSpan[conlTabsIndex].className='';
        conlTabsIndex=i;
        conlTabsSpan[conlTabsIndex].className='actives';  
      })
    }




 function conlTabUls(){
       for (let j = 0; j < res.data[index].list.length;j++) {
           conlTabUl.innerHTML+=`
           <li class="flex" data-id="${res.data[index].list[j].sourceid}" >
                        <img src="${res.data[index].list[j].pic}" alt="">
                        <div class="con_item_info">
                            <div class="name">${res.data[index].list[j].name}</div>
                            <div class="time">${res.data[index].list[j].pub}</div>
                    </div>
            </li>`
    }
    conlTabUl.children[0].className='flex activeBg'
    conrTitle.children[0].innerText=conlTabUl.children[0].children[1].children[0].innerText;
    rankID=conlTabUl.children[0].dataset.id;
    rankLists();
    zuire();
     zuixin();

if(conlTabUl.children[0].children[1].children[1].innerText == '今日更新'){
      conrTitle.children[1].innerText=`更新时间: ${dateNow}`
      }else{
     let gengxin=conlTabUl.children[0].children[1].children[1].innerText.split('日')[0].split('月');
    gengxin.unshift(`${date.getFullYear()}`)
     conrTitle.children[1].innerText=`更新时间: ${ gengxin.join('-')}`;
    }
 }

  rankLists();
zuire();
zuixin();

   // 背景切换
  // 动态获取ul
  let conTabLis=document.getElementById('conlTabUl');
    conTabLis.addEventListener('click',function(e){
    if(e.target.parentNode.nodeName =='DIV' ){
      page=1;
      document.querySelector('.activeBg').classList.remove('activeBg');
      e.target.parentNode.parentNode.classList.add('activeBg');
      conrTitle.children[0].innerText=e.target.parentNode.children[0].innerText;
      rankID=e.target.parentNode.parentNode.dataset.id;
      if(e.target.parentNode.children[1].innerText == '今日更新'){
         conrTitle.children[1].innerText=`更新时间: ${dateNow}`
      }else{
     let gengxin=e.target.parentNode.children[1].innerText.split('日')[0].split('月');
    gengxin.unshift(`${date.getFullYear()}`)
     conrTitle.children[1].innerText=`更新时间: ${ gengxin.join('-')}`;
      }
      rankLists();
      zuire();
      zuixin();
    }else if(e.target.parentNode.nodeName =='UL'){
       page=1;
      document.querySelector('.activeBg').classList.remove('activeBg');
      e.target.classList.add('activeBg')
      conrTitle.children[0].innerText=e.target.children[1].children[0].innerText
      rankID=e.target.dataset.id;
       if(e.target.children[1].children[1].innerText == '今日更新'){
         conrTitle.children[1].innerText=`更新时间: ${dateNow}`
      }else{
     let gengxin=e.target.children[1].children[1].innerText.split('日')[0].split('月');
    gengxin.unshift(`${date.getFullYear()}`)
     conrTitle.children[1].innerText=`更新时间: ${ gengxin.join('-')}`;
      }
      rankLists();
      zuire();
      zuixin();
    }
    else{
      page=1;
      document.querySelector('.activeBg').classList.remove('activeBg');
      e.target.parentNode.classList.add('activeBg');
      conrTitle.children[0].innerText=e.target.parentNode.children[1].children[0].innerText;
      rankID=e.target.parentNode.dataset.id;
       if(e.target.parentNode.children[1].children[1].innerText == '今日更新'){
         conrTitle.children[1].innerText=`更新时间: ${dateNow}`
      }else{
     let gengxin=e.target.parentNode.children[1].children[1].innerText.split('日')[0].split('月');
    gengxin.unshift(`${date.getFullYear()}`)
     conrTitle.children[1].innerText=`更新时间: ${ gengxin.join('-')}`;
      }
       rankLists();
       zuire();
       zuixin();
      }
   
    })


 //  封装rankList函数

      function rankLists(){
      fetch(`http://39.96.88.57:9090/api/www/bang/bang/musicList?bangId=${rankID}&pn=${page}&rn=${pageSize}&httpsStatus=1`).then(res => res.json()).then(res=>{
      totals = res.data.num;
      rankList.innerHTML='';  
      res.data.musicList.forEach((item,index) => {
          rankList.innerHTML+=`
         <li class="song_item flex">
                
                 <div class="song_rank flex">
                            <div class="rank_num">
                            ${page==1? index<3?`<img src="./images/top${index+1}.png" alt=""></img>`:`<span>${page*pageSize+index+1-20}</span>`:`<span>${page*pageSize+index+1-20}</span>`}
                            </div>
                            <img src="${item.pic}" alt="">
                  </div>
                        <div class="song_name flex">
                            <a href="./lyrics.html?id=${item.rid}" title="${item.name}">${item.name}</a>
                            <i>无损</i>
                        </div>
                        <div class="song_artist">
                            <a href="./singerDetails.html?id=${item.artistid}"><span title="${item.artist}">${item.artist}</span></a>
                        </div>
                        <div class="song_album">
                           <a href="./album.html?id=${item.albumid}"><span title="${item.album}">${item.album}</span></a>
                        </div>
                        <div class="song_time">
                            <span>${item.songTimeMinutes}</span>
                        </div>
                    
               
          </li>
        `
        
     });
        render()

    })
    
 } 

// 歌曲分页
        render()
        function render() {
            layui.use('laypage', function () {
                 laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem:'pagingTest' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: totals, //数据总数，从服务端得到
                    limit: pageSize,
                    prev: "<",
                    next: ">",
                    groups: 3,
                    hash: 'fenye',
                    curr: location.hash.replace('#!fenye=', ''),
                    layout: ["prev", "page", "next"],
                    theme: '#ffdf1f',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            page = obj.curr;
                            pageSize = obj.limit;
                            rankLists()
                        }
                    }
                });
            });


        }

})

  
function zuire(){
    
fetch(`http://39.96.88.57:9090/comment?type=get_rec_comment&f=web&page=${plPage}&rows=${plPageSize}&digest=2&sid=${rankID}&uid=0&prod=newWeb&httpsStatus=1`).then(r => r.json()).then(res => {
          console.log(plPage,plPageSize);
            allS1.innerHTML=''
          if(plPage>15){
            allS1.innerHTML=''
          }else{
   allS1.innerHTML+=`
           ${res.total?`<div class="type"><span>热门评论</span> <span class="comment-num">${res.total+'条'}</span></div>`:``}
           `
            allS1.innerHTML+=''
              res.rows.forEach((item,index)=>{
                if(index<5){
                    allS1.innerHTML+=`
                   <div class="each-comment" id="eachComment">
                    <div class="each-comment-avatar"><img alt=""
                                    data-src="http://q.qlogo.cn/qqapp/100243533/4BDAC75DED25461B51510E9B31D006F9/100"
                                    src="${item.u_pic?item.u_pic:"./images/NotLoad.png"}"
                                    lazy="loaded"></div>
                            <div class="each-comment-msg">
                                <div class="each-comment-nickname"><span>${item.u_name}</span> <i class=""></i></div>
                                <div class="each-comment-content text-selection">${item.msg}</div>
                                ${item.reply?` <div class="each-reply-content"><a href="javascript:;" class="reply-name">${item.reply?'@'+item.reply.u_name:''}</a> <span
                                class="text-selection">${item.reply?item.reply.msg:''}</span></div>`:''}
                                <div class="each-comment-time">
                                    <div class="time">
                                      ${item.time}
                                    </div>
                                </div>
                            </div>
                               </div>
                  `
                }
              })
          }
        
       
              plRender();
            })
}
        
function zuixin(){
fetch(`http://39.96.88.57:9090/comment?type=get_comment&f=web&page=${plPage}&rows=${plPageSize}&digest=2&sid=${rankID}&uid=0&prod=newWeb&httpsStatus=1`).then(r => r.json()).then(res => {
            plTotals = res.total;
            allS2.innerHTML=''
           allS2.innerHTML+=`
              ${res.total?`<div class="type"><span>最新评论</span> <span class="comment-num">${res.total+'条'}</span></div>`:`<div class="nodata flex">
                            <div class="inner">
                                <img src="https://h5static.kuwo.cn/www/kw-www/img/introduce_grey.f18848f.png"
                                   alt="">
                                <div class="tipp">暂无评论</div>
                            </div>
                        </div>`}
           ` 
              res.rows.forEach((item,index)=>{
                // console.log(item);
                if(index<5){
                    allS2.innerHTML+=`
                   <div class="each-comment" id="eachComment">
                    <div class="each-comment-avatar"><img alt=""
                                    data-src="http://q.qlogo.cn/qqapp/100243533/4BDAC75DED25461B51510E9B31D006F9/100"
                                    src="${item.u_pic?item.u_pic:"./images/NotLoad.png"}"
                                    lazy="loaded"></div>
                            <div class="each-comment-msg">
                                <div class="each-comment-nickname"><span>${item.u_name}</span> <i class=""></i></div>
                                ${item.reply?'':`<div class="each-comment-content text-selection"><span>${item.reply?'':item.msg}</span></div>`}
                                ${item.reply?`<div class="each-comment-content text-selection"><a href="javascript:;" class="reply-name">${item.reply?'回复@'+item.reply.u_name:''}</span></a> <span class="">${item.reply?item.msg:''}</span></div>`:''}
                                 ${item.reply?`<div class="each-reply-content"><span class="text-selection">${item.reply?item.reply.msg:''}</span></div>`:''}
                                <div class="each-comment-time">
                                    <div class="time">
                                      ${item.time}
                                    </div>
                                </div>
                            </div>
                               </div>
                  `
                }
              })
              plRender();
            })
}
        
// 评论分页
        plRender()
        function plRender() {
            layui.use('laypage', function () {
                let laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'plPagingTest' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: plTotals, //数据总数，从服务端得到
                    limit: plPageSize,
                    prev: "<",
                    next: ">",
                    groups: 3,
                    hash: 'fenye',
                    curr: location.hash.replace('#!fenye=', ''),
                    layout: ["prev", "page", "next"],
                    theme: '#ffdf1f',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            plPage = obj.curr;
                            plPageSize = obj.limit;
                            zuire();
                            zuixin();
                        }
                    }

                });
            });
        }

             

    
     











 

})